<template>
  <div>
    <v-header>
      <v-back></v-back>
    </v-header>
    <div class="search">
      <van-search
        @keydown.enter="enterBtn"
        v-model="search_val"
        placeholder="请输入搜索关键词"
      />
    </div>
    <!-- 占位 -->
    <div class="height_kong"></div>
    <!-- cards -->
    <!--  -->
    <div>
      <van-card
        v-for="(item, index) in cates_cards"
        :key="item.id"
        @click="card_btn(index)"
      >
        <template #thumb>
          <img class="thumb_img" :src="_localhost + item.img" alt="" />
        </template>
        <template #tags>
          <div class="tag2">
            <van-tag class="tag11">{{ item.goodsname }}</van-tag>
            <br />
            <van-tag class="tag12"
              ><span>￥ {{ item.price }}</span
              ><del
                ><span>￥ {{ item.market_price }}</span></del
              ></van-tag
            >
            <br />
            <van-tag class="tag13">双11.11限购</van-tag>
            <br />
            <van-tag class="tag14"
              >{{ item.conmentNum }}评论 &nbsp; 99%好评</van-tag
            >
          </div>
        </template>
      </van-card>
    </div>
    <!--  -->
    <!-- 无数据显示 -->
    <div>
      <div class="img" v-show="cates_cards.length == 0 ? true : false">
        <img src="./暂无数据.jpg" alt="" />
        <br />
        <van-button type="warning">随便逛逛</van-button>
      </div>
    </div>
  </div>
</template>

<script>
// 导入 axios api
import { getSearch } from "@/request/api.js";
export default {
  data() {
    return {
      search_val: "",
      cates_cards: [
        {
          id: "001",
          src: "",
          goodsname: "联想小新",
          price: 4499,
          market_price: 4699,
          conmentNum: 3565,
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: "002",
          src: "",
          goodsname: "联想小新",
          price: 4499,
          market_price: 4699,
          conmentNum: 3565,
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
        },
      ],
    };
  },
  methods: {
    // 商品点击进入详情页
    card_btn(index) {
      this.$router.push(`/detail?id=${this.cates_cards[index].id}`);
    },
   async  enterBtn() {
     console.log(this.search_val,9000 );
      let obj = { keywords: this.search_val };
      // 获取后端返回的数据
      let getSearchRes = await getSearch(obj);
      let arr = []

      // 搜索出来的商品信息
      this.cates_cards = getSearchRes.data.list ?getSearchRes.data.list:arr;
    },
  },
  async created() {
      // console.log(this.$route.query,'qqqq');

    // 获取参数
    this.search_val = this.$route.query.keywords;
    let obj = { keywords: this.search_val };
    // 获取后端返回的数据
    let getSearchRes = await getSearch(obj);
    console.log(getSearchRes, 111);

    // 搜索出来的商品信息
    this.cates_cards = getSearchRes.data.list || [];
  },
};
</script>

<style scoped>
.van-search {
  background-color: #0000;
}
.search {
  background-color: orangered;
  position: fixed;
  top: 0.4rem;
  z-index: 2;
  width: 100vw;
}

/* 无数据  */
.img {
  text-align: center;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img > img {
  margin-left: -0.25rem;
}
.van-button {
  border-radius: 0.1rem;
}

/* 商品 */

.van-card {
  overflow: hidden;
  height: 40vw;
}
.thumb_img {
  width: 40vw;
  height: 40vw;
  margin-left: -0.15rem;
}
.tag2 {
  margin-left: 0.5rem;
}
/* 右侧内容 */
.tag11 {
  background-color: #0000;
  color: black;
  font-weight: 600;
}
.tag12 {
  margin-top: 0.15rem;
  background-color: #0000;
  color: black;
  font-weight: 600;
  font-size: 0.16rem;
}
.tag12 > span {
  color: orange;
}
.tag12 > del > span {
  color: #666;
}
.tag13 {
  margin-top: 0.2rem;
  background-color: #ff5f40;
  padding: 0.03rem 0.05rem;
  font-size: 0.16rem;
}
.tag14 {
  margin-top: 0.2rem;
  background-color: #0000;
  padding: 0.03rem 0.05rem;
  font-size: 0.16rem;
  color: #6669;
  font-weight: 600;
}

/* height_kong 占位 */
.height_kong {
  height: 0.75rem;
}
/*  */
.van-card:not(:first-child) {
  margin: 0;
}
</style>